<template>
  <div>
    <!-- 添加头像模态框 -->
    <el-dialog :visible.sync="addImgform">
      <!-- 侧边栏 -->
      <div class="box">
        <el-aside width="200px">
          <ul>
            <li v-for="item in asidelist" :key="item.id" @click="getid(item.id)">
              <span>{{ item.name }}</span>
                {{ item.images_count }}
            </li>
          </ul>
        </el-aside>
        <!-- 图片列表 -->
        <el-row>
          <el-col :span="4" v-for="(o, index) in pics" :key="index">
            <el-card :body-style="{ padding: '0px' }">
              <el-image
                :src="o.url"
                style="width: 100%; height: 150px"
                @click="getimg(o.url)"
              />
              <span>{{ o.name }}</span>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props:['addImgform'],
  data() {
    return {
      addImgform: true, //添加头像
      pics: [],
      id: "", //相册分类id
      asidelist: [],
      page:1,
      limit:8,
      order:'',
      keyword:'',
      avatar: "",
    };
  },
  created() {},
  mounted() {
      this.getImage();
      this.getaside();
  },
  methods: {
    // 点击切换侧边栏
    getid(id) {
      console.log(id);
      this.id = id;
      this.getImage();
    },
    // 侧边栏数据
    getaside() {
      this.$axios.get(`/admin/imageclass/${this.page}?limit=`).then((res) => {
        // console.log(res);
        this.asidelist = res.data.list;
        this.id = res.data.list[0].id;
        this.getImage();
        console.log(this.id);
      });
    },
    getImage() {
      this.$axios
        .get(
          `/admin/imageclass/${this.id}/image/${this.page}?limit=${this.limit}&order=${this.order}&keyword=${this.keyword}`
        )
        .then((res) => {
          // console.log(res);
          this.pics = res.data.list;
          console.log(this.pics);
        });
    },
    // 头像显示
    getimg(img){
      // this.avatar = img;
      // this.addImgform = false;  
      // console.log(123)
      this.$emit('img', img);
    },
  },
  computed: {},
};
</script>

<style scoped lang="scss">
img {
  width: 50px;
  height: 50px;
}
.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  ul {
    width: 100%;
    padding: 0 10px;
    overflow: auto;
    li {
      width: 100%;
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #ccc;
      display: flex;
      justify-content: space-between;
      cursor: pointer;
    }
  }
}
.box {
  display: flex;
}
.el-dialog {
  display: flex;
}
.el-image {
  width: 50px;
  height: 50px;
}
</style>
